package myJs.cps

import myJs.Implicits._
import myJs.myPkg.DatetimePickerOptions
import myJs.myPkg.jquery.$
import myJs.myPkg.reactHookForm.UseFormRT
import myJs.tool.Tool
import org.scalajs.dom.{Event, html}
import org.scalajs.dom.html.{Div, Input}
import slinky.core.{FunctionalComponent, SyntheticEvent, TagElement}
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._

/**
 * Created by yz on 21/1/2022
 */
@react object PureDateTimePickerCp {

  case class Props(
                    useForm: UseFormRT,
                    placeHolder: String = "", name: String = "",
                    onChange: String => Unit,
                    value: String,
                    pattern: String = "yyyy-mm-dd hh:ii:ss"
                  )

  val component = FunctionalComponent[Props] { props =>

    val divRef = React.createRef[Div]

    object FTool {

    }

    useEffect(() => {
      val options = DatetimePickerOptions(format = props.pattern, autoclose = true, language = "zh-CN")
      $(divRef.current).find(":input").datetimepicker(options)
    }, List()
    )

    useEffect(() => {
      $(divRef.current).find(":input").offThenOn("changeDate blur", (e: Event) => {
        val myV = $(divRef.current).find(":input").myVal
        props.onChange(myV)
      })
      () => {
        $(divRef.current).find(":input").off("changeDate")
      }
    }
    )

    div(ref := divRef,
      PureInputCp(useForm = props.useForm, `type` = "text",
        name = props.name, width = "100%", placeHolder = props.placeHolder,
        value = props.value, onChange = props.onChange)
    )


  }

}
